<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <script src="js/vuex.js"></script>
    </head>
    <body>
        <div id="app">
            <father></father>
        </div>
        <template id="father">
            <div>
                {{this.$store.getters.formart}}

            </div>
        </template>
        <template id="son">
            <div>
               
            </div>
        </template>

        <script>

            let store = new Vuex.Store({
                // 用于保存共享数据
                state:{
                    msg:"数据1"
                },
                // 用于保存修改共享数据的方法
                mutations:{

                },
                getters:{
                    formart(state){
                        console.log("getters方法被执行了");
                        return state.msg + "ssssss"
                    }
                }
            })
            Vue.component("father", {
                template: "#father",
                store:store,
                // data() {
                //     return {
                //         msg:"数据1"
                //     }
                // },
                // computed:{
                //     formart(){

                //         return this.msg + "aaaaaa"
                //     }
                // }
            })

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                }
            });
        </script>
    </body>
</html>